<script setup lang="ts">
import { ref } from 'vue'
import apiClient from "../axios/axios.ts";


defineProps<{ msg: string }>()

const count = ref(0)
const userNameInput = ref('') // 新增：用于输入用户名的响应式变量
const userData = ref<any>(null)

const getUserByName = async () =>{
  const response = await apiClient.get('/user/phone/' + userNameInput.value.trim());
  console.log('API Response:', response.data);
  userData.value = response.data;

}


</script>

<template>
  <h1>{{ msg }}</h1>

  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
    <p>
      Edit
      <code>components/HelloWorld.vue</code> to test HMR
    </p>
  </div>

  <div>
    <input type="text" v-model="userNameInput" placeholder="输入用户名" />
    <button type="button" @click="getUserByName">
      获取数据
    </button>
    <div v-if="userData">
      <h2>获取到的数据:</h2>
      <pre>{{ JSON.stringify(userData, null, 2) }}</pre>

    </div>
  </div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
input[type="text"] {
  margin-right: 10px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
button {
  padding: 8px 15px;
  border: none;
  background-color: #4CAF50;
  color: white;
  border-radius: 4px;
  cursor: pointer;
}
pre {
  background-color: #f5f5f5;
  padding: 10px;
  border-radius: 4px;
  text-align: left; /* 让 pre 标签内容左对齐 */
  white-space: pre-wrap; /* 允许自动换行 */
  word-break: break-all; /* 允许在单词内断行 */
}
</style>
